<template>
    <div class="matchs">
        <dl>
            <dd v-for="(item,index) in matches" :key="index">
                <b>{{item.no}}</b>
                <strong>{{item.home}} vs {{item.visitor}}</strong>
            </dd>
        </dl>
        <icon name="right" scale="1.5"/>
    </div>
</template>

<script>
    export default {
        name: 'Matchmiddle',
        props: ['matches']
    }
</script>

<style scoped lang="less" rel="stylesheet/less">
    @import "../router/app.less";

    .matchs {
        padding: 20px 10px;
        background: #f8f8f8;
        font-size: @fz28;
        display: flex;
        align-items: center;
        margin: 20px 0 30px 0;
        svg {
            color: @color4;
        }
        dl {
            flex: 1;
            dd {
                display: flex;
                b {
                    width: 120px;
                    color: @colororange;
                }
                strong {
                    color: @color2;
                }
            }
        }
    }

</style>
